<script setup>
    import { onMounted, onUnmounted, onUpdated } from 'vue';

    const count = ref(1)

    // 创建一个对DOM元素的引用对象
    const hello = ref(null)
    
    console.log('created........')

    onMounted(() => {
        console.log('mounted........')

        // 获取页面上的DOM元素
        console.log(hello.value) 
    })

    onUpdated(() => {
        console.log("updated.......")
    })

    onUnmounted(() => {
        console.log("unmouned......")
    })    
</script>

<template>  
    <p ref="hello">{{ count }}</p>

    <button @click="count++">修改count</button>
</template>

<style scoped>

</style>